<template>
  <div class="box2">
    <el-form
      :model="ruleForm"
      :rules="rules"
      :inline="false"
      ref="ruleForm"
      label-width="220px"
      class="demo-ruleForm"
      size="medium"
    >
      <div class="must">
        <div class="cad">
          <el-form-item label=" 申请号：" prop="loginNum">
            <el-input v-model="ruleForm.loginNum" placeholder="请填写"></el-input>
            <div class="informm">
              <img src="../../assets/imgs/inform.png" alt="通知" />
              <div class="content">
                <span>示例：2515783543</span>
              </div>
            </div>
          </el-form-item>
          <!-- <el-form-item label="是否共有商标：">
            <el-radio-group v-model="ruleForm.radio">
              <el-radio class="input" :label="1">是</el-radio>
              <el-radio class="input" :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="其他共有申请人：" v-if="ruleForm.radio" ruleForm.radio>
            <both
              :callback="getBoth"
              :append="$store.state.alterData.append"
              :class_id="$route.query.id"
            ></both>
          </el-form-item> -->
          <!--<div v-if="ruleForm.radio" class="common">-->
          <!--<el-form-item label=" 其他共有人：" prop="radio"></el-form-item>-->
          <!--&lt;!&ndash; <el-form-item label="* 其他共有人" prop></el-form-item> &ndash;&gt;-->
          <!--<div v-for="(item,index) in common" :key="index">-->
          <!--<el-form-item :label="item.name" prop="value">-->
          <!--<el-input v-model="item.value" placeholder="请填写姓名"></el-input>-->
          <!--<div class="informm">-->
          <!--<img src="../../assets/imgs/inform.png" alt="通知" />-->
          <!--<div class="content">-->
          <!--<span>示例：王五</span>-->
          <!--</div>-->
          <!--</div>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.englishName" prop="englishValue">-->
          <!--<el-input v-model="item.englishValue" placeholder="请填写姓名"></el-input>-->
          <!---->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.site" prop="siteValue">-->
          <!--<el-input v-model="item.siteValue" placeholder="请填写地址"></el-input>-->
          <!--<div class="informm">-->
          <!--<img src="../../assets/imgs/inform.png" alt="通知" />-->
          <!--<div class="content">-->
          <!--<span>示例：四川省成都市双流区中和大道二段</span>-->
          <!--</div>-->
          <!--</div>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.englishSite" prop="person_site">-->
          <!--<el-input v-model="item.englishSiteValue" placeholder="请填写地址"></el-input>-->
          <!---->
          <!--</el-form-item>-->
          <!---->
          <!--<el-form-item :label="item.changeName" prop="value">-->
          <!--<el-input v-model="item.chName" placeholder="请填写姓名"></el-input>-->
          <!---->
          <!--<div class="informm">-->
          <!--<img src="../../assets/imgs/inform.png" alt="通知" />-->
          <!--<div class="content">-->
          <!--<span>示例：王六</span>-->
          <!--</div>-->
          <!--</div>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.changeEnglishName" prop="englishValue">-->
          <!--<el-input v-model="item.chNameEn" placeholder="请填写姓名"></el-input>-->
          <!---->
          <!--</el-form-item>-->
          <!---->
          <!--<el-form-item :label="item.changeSite" prop="siteValue">-->
          <!--<el-input v-model="item.chAddr" placeholder="请填写地址"></el-input>-->
          <!--<div class="informm">-->
          <!--<img src="../../assets/imgs/inform.png" alt="通知" />-->
          <!--<div class="content">-->
          <!--<span>示例：四川省成都市双流区中和大道二段</span>-->
          <!--</div>-->
          <!--</div>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.changeEnglishSite" prop="person_site">-->
          <!--<el-input v-model="item.chAddrEn" placeholder="请填写地址"></el-input>-->

          <!--</el-form-item>-->
          <!--</div>-->
          <!--<div class="btnBox">-->
          <!--<el-button icon="el-icon-plus" @click="plus" circle></el-button>-->
          <!--<el-button icon="el-icon-minus" @click="dele" v-if="common.length>0" circle></el-button>-->
          <!--</div>-->
          <!--</div>-->
          <el-form-item label="变更管理规则：" prop="ruleRadio">
            <el-radio-group v-model="ruleForm.ruleRadio">
              <el-radio class="input" :label="1">是</el-radio>
              <el-radio class="input" :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="变更集体成员名单：" prop="radio">
            <el-radio-group v-model="ruleForm.alterRadio">
              <el-radio class="input" :label="1">是</el-radio>
              <el-radio class="input" :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- <div class="line"></div> -->

          <el-form-item label="申请人变更选项：" class="applySeleBox" v-if="ruleForm.ruleRadio==0">
            <el-radio-group v-model="showSta">
              <el-radio :label="1">仅变更申请人名义</el-radio>
              <el-radio :label="2">仅变更申请人地址</el-radio>
              <el-radio :label="3">变更申请人名称和地址</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- v-for变更前名义新增 -->
          <!--<div class="showBox" >-->
          <div class="common" v-if="ruleForm.ruleRadio==0">
            <div class="changedBy">
              <div v-for="(item,ind) in apply" :key="ind">
                <el-form :rules="app_rule[showSta]" :model="item" style="width: 39%;">
                  <el-form-item
                    label="请填写变更前名义："
                    width="100%"
                    prop="befNameChangeCn"
                    v-if="showSta==1||showSta==3"
                  >
                    <el-input
                      v-model="item.befNameChangeCn"
                      placeholder="请填写名义"
                      style="width: 50%;"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    label="英文："
                    prop="befNameChangeEn"
                    v-if="showSta==1||showSta==3"
                    style="margin-left: 47px;"
                  >
                    <el-input
                      v-model="item.befNameChangeEn"
                      placeholder="请填写姓名"
                      style="width: 50%;"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    label="请填写变更前地址："
                    prop="befAddChangeCn"
                    v-if="showSta==2||showSta==3"
                    :style="showSta==2 ? 'margin-left: -46px;' : 'margin-left: -38px;'"
                  >
                    <el-input
                      v-model="item.befAddChangeCn"
                      placeholder="请填写地址"
                      style="width: 50%;;"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="英文："
                    prop="befAddChangeEn"
                    v-if="showSta==2||showSta==3"
                     style= "margin-left: 47px;"
                  >
                    <el-input
                      v-model="item.befAddChangeEn"
                      placeholder="请填写地址"
                      style="width: 50%;;"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="请上传图片证明："
                    prop="proImg"
                    v-if="showSta==1||showSta==3"
                    style="margin-left: -30px;"
                  >
                    <upfile :callback="backCardImageMain" :file_config="{index:ind}">
                      <img :src="mconfig.host+item['proImg']" v-if="item['proImg']" />
                    </upfile>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="btnBox">
              <el-button @click="applyplus" size="mini">新增申请人</el-button>
              <el-button @click="applydele" v-if="apply.length>0" size="mini">删除申请人</el-button>
            </div>
          </div>
          <!--</div>-->
          <!-- 地址 -->
          <!--<div v-if="showList.showA" class="showBox" >-->
          <!--<div class="common">-->
          <!--<div v-for="(item,ind) in apply" :k="ind">-->
          <!--<el-form-item label="请填写变更前地址：" prop="befAddChangeCn">-->
          <!--<el-input v-model="item.befAddChangeCn" placeholder="请填写地址"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="英文：" prop="befAddChangeEn">-->
          <!--<el-input v-model="item.befAddChangeEn" placeholder="请填写地址"></el-input>-->
          <!--</el-form-item>-->
          <!---->
          <!--</div>-->
          <!--<div class="btnBox">-->
          <!--<el-button icon="el-icon-plus" @click="applyplus" circle></el-button>-->
          <!--<el-button icon="el-icon-minus" @click="applydele" v-if="apply.length>0" circle></el-button>-->
          <!--</div>-->
          <!--</div>-->
          <!--</div>-->
          <!--&lt;!&ndash; 全部 &ndash;&gt;-->
          <!--<div v-if="showList.showAll" class="showBox" >-->
          <!---->
          <!--<div v-for="(item,ind) in apply" :k="ind">-->
          <!--<el-form-item label="请填写变更前名义：" prop="befNameChangeCn">-->
          <!--<el-input v-model="item.befNameChangeCn" placeholder="请填写名义"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="英文：" prop="befNameChangeEn">-->
          <!--<el-input v-model="item.befNameChangeEn" placeholder="请填写姓名"></el-input>-->
          <!--</el-form-item>-->
          <!---->
          <!---->
          <!--</div>-->

          <!-- <el-form-item label="请上传图片证明" prop="proImg">
                      <upfile :callback="backCardImageMain">
                        <img :src="img_default['proImg']" v-if="img_default['proImg']" />
                      </upfile>
          </el-form-item>-->
          <!--<div class="btnBox">-->
          <!--<el-button icon="el-icon-plus" @click="applyplus" circle></el-button>-->
          <!--<el-button icon="el-icon-minus" @click="applydele" v-if="apply.length>0" circle></el-button>-->
          <!--</div>-->
          <!--</div> -->

           <el-form-item label="商标类型：">
            <el-radio-group v-model="ruleForm.decTraAppModel"  text-color="#f00">
              <el-radio  :label="0">普通商标</el-radio>
              <el-radio  :label="1">证明商标</el-radio>
              <el-radio  :label="2">集体商标</el-radio>
            </el-radio-group>
          </el-form-item>

          <!--证明商标-->
          <div v-if="ruleForm.decTraAppModel==1">
            <el-form-item label="变更管理规则(证明商标)：" prop="zhengmingrulefile">
              <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'zhengmingrulefile'}" :list="ruleForm.zhengmingrulefile"></uploads>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>提示：请上传附件,并填写文字说明</span>
                </div>
              </div>
              <el-input type="textarea" rows="4" placeholder="请填写文字说明" v-model="ruleForm.zhengmingruletext" style="width:80%"></el-input>
            </el-form-item>
            <!-- <el-form-item label="变更管理规则(证明文件)：" prop='zhengmingruletext'>
                <el-input type="textarea" rows="4" v-model="ruleForm.zhengmingruletext"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知"/>
                    <div class="content">
                        <span>请申请人根据所申请的商标类型(普通集体/地理标志集体/普通证明/地理标志证明商标)
                            选择对应的商标使用管理规则填写，管理规则内容以填写的文本为准”。</span>
                    </div>
                </div>
            </el-form-item> -->
          </div>

          <!--集体商标-->
          <div v-if="ruleForm.decTraAppModel==2">
            <el-form-item label="变更管理规则(集体商标)：" prop="jtuserulefile">
              <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'jtuserulefile'}" :list="ruleForm.jtuserulefile"></uploads>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>提示：请上传附件,并填写文字说明</span>
                </div>
              </div>
              <el-input type="textarea" rows="4" placeholder="请填写文字说明" v-model="ruleForm.jtuseruletext" style="width:80%"></el-input>
            </el-form-item>

            <el-form-item label="变更集体成员名单：" prop="jtusepepleotherfile">
              <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'jtusepepleotherfile'}" :list="ruleForm.jtusepepleotherfile"></uploads>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>提示：请上传附件,并填写文字说明</span>
                </div>
              </div>
              <el-input type="textarea" rows="4" placeholder="请填写文字说明" v-model="ruleForm.jtusepepleothertext" style="width:80%"></el-input>
            </el-form-item>

            <!-- <el-form-item label="变更集体成员名单：" ruleForm.radio>
              <both
                :callback="getBoth"
                :append="$store.state.alterData.append"
                :class_id="$route.query.id"
              ></both>
            </el-form-item> -->
          </div>

          <el-form-item class="upload" label="网上确认书：" prop="qrfiles">
            <upfile :callback="setSure">
              <img :src="ruleForm.qrfile?'':imgfile" v-if="$store.state.stateJdg" />
            </upfile>
            <div class="exam-img">
              <div class="img-inform">
                <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
              </div>
              <examimg :imgType="4"></examimg>
            </div>
            <div>
              <span class="informs">
                请点此
                <a :href="mconfig.host + '/file/download?fileType=2'">下载网上确认书</a>,查到相应商标编号并填充
              </span>
              <br />
              <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
            </div>
          </el-form-item>
          <el-form-item label="其他附件：">
            <uploads
                :callback="backUrl"
                :delUrl="delUrl"
                :file_config="{field:'dengjichenluofile'}"
                :list="ruleForm.dengjichenluofile"></uploads>
            <div class="exam-img" style="margin-left: 80px;">
              <div class="img-inform">
                <img src="../../assets/imgs/inform.png">
                <span>提示：其他附件</span>
              </div>
            </div>

          </el-form-item>
          <div class="btns">
            <el-button type="primary" @click="outStep">上一步</el-button>
            <el-button type="primary" @click="dialogVisible = true;verify('ruleForm')">提交并审核</el-button>
          </div>
        </div>
        <el-dialog
          class="dialog"
          :show-close="false"
          :center="true"
          :visible.sync="dialogVisible"
          width="460px"
          :before-close="handleClose"
        >
          <div class="hint">
            <img src="../../assets/imgs/branch.png" alt="提示图片" />
            <span>选择您想去办理的网点</span>
          </div>
          <el-form-item label="选择网点：" prop="value">
            <el-select v-model="ruleForm.value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              >
                <span style="float: left">{{ item.deptName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <div slot="footer" class="dialog-footer">
            <el-button class="btnshut" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog
          class="hintMsg"
          :show-close="false"
          title="温馨提示"
          :visible.sync="centerDialogVisible"
          width="462px"
        >
          <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="skip">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
import upfile from "../common/upfile";
import config from "../../utils/config";
import both from "../common/both.vue";
import examimg from "../common/imgExample";
import uploads from "@/components/common/uploads";
export default {
  data() {
    return {
      apply: [], //变更前总数据
      applyModel: {
        //变更前模板
        befNameChangeCn: "",
        befNameChangeEn: "",
        befAddChangeCn: "",
        befAddChangeEn: "",
      },

      showSta: 0,
      img_default: {},
      //      showList:{showN:false,showA:false,showAll:false},

      //网点列表
      options: [],
      //提交成功弹出框变量
      centerDialogVisible: false,
      //网点弹出框控制变量
      dialogVisible: false,
      //提交表单
      formData: new FormData(),
      //表单唯一id
      classId: "",
      //共有人
      common: [],
      //共有人模板
      commonModel: {
        //一个数组包对象的事，整4个模板，搁这套娃呢？？
        name: "更变前名称(中文)：",
        englishName: "(英文)：",
        site: "变更前地址(中文)：",
        englishSite: "(英文)：",
        value: "",
        englishValue: "",
        siteValue: "",
        englishSiteValue: "",
        changeName: "更变后名称(中文)：",
        changeEnglishName: "(英文)：",
        changeSite: "变更后地址(中文)：",
        changeEnglishSite: "(英文)：",

        chAddr: "",
        chAddrEn: "",
        chName: "",
        chNameEn: "",
      },
      //实际模板
      modelcommon: {
        partNameCh: "",
        partNameEn: "",
        partAddrCh: "",
        partAddrEn: "",

        changeAfterAddr: "",
        changeAfterAddrEn: "",
        changeAfterName: "",
        changeAfterNameEn: "",
      },
      //填写的信息
      ruleForm: {
        Linkman: "练习",
        organization: "",
        loginNum: "",
        // 其他附件
        dengjichenluofile:[],
        zhengmingrulefile:[],
        jtuserulefile:[],
        jtusepepleotherfile:[],

        zhengmingruletext:"", //证明商标文本
        jtuseruletext:"", //集体商标文本
        jtusepepleothertext:"",

        radio: 0,
        ruleRadio: 0,
        alterRadio: 0,
        value: "",
        commonArr: [],
        applyArr: [],
        qrfile: "",
        // value: "",
        englishValue: "",
        siteValue: "",
        englishSiteValue: "",
        proImg: "",
        decTraAppModel:0,
      },
      imgfile: "",
      app_rule: {
        1: {
          befNameChangeCn: [
            {
              required: true,
              message: "必须填写修改前姓名",
              trigger: "change",
            },
          ],
          proImg: [
            { required: true, message: "请上传图片证明", trigger: "change" },
          ],
        },
        2: {
          befAddChangeCn: [
            {
              required: true,
              message: "必须填写修改前地址",
              trigger: "change",
            },
          ],
        },
        3: {
          befNameChangeCn: [
            {
              required: true,
              message: "必须填写修改前姓名",
              trigger: "change",
            },
          ],
          proImg: [
            { required: true, message: "请上传图片证明", trigger: "change" },
          ],
        },
      },
      rules: {
        loginNum: [
          { required: true, message: "申请号不能为空", trigger: "change" },{pattern: /^\d{0,30}$/,message: "您的输入太长",trigger: "blur"},
        ], //  申请号

        dengjichenluofile: [
          { required: true, message: "附件不能为空", trigger: "change" },
        ],
        zhengmingrulefile: [
          { required: true, message: "证明商标(图片)不能为空", trigger: "change" },
        ],
        jtuserulefile: [
          { required: true, message: "集体商标(图片)不能为空", trigger: "change" },
        ],
        jtusepepleotherfile: [
          { required: true, message: "集体成员(图片)不能为空", trigger: "change" },
        ],
        zhengmingruletext: [
          { required: true, message: "附件不能为空", trigger: "blur" },
        ],
        jtuseruletext: [
          { required: true, message: "附件不能为空", trigger: "blur" },
        ],
        jtusepepleothertext: [
          { required: true, message: "附件不能为空", trigger: "blur" },
        ],

        radio1: [
          {
            required: true,
            message: "共有商标选项不能为空",
            trigger: "change",
          },
        ],
        ruleRadio: [], //  变更管理规则
        alterRadio: [
          {
            required: true,
            message: "变更集体成员名单不能为空",
            trigger: "change",
          },
        ], //  变更管理规则
        qrfile: [
          { required: true, message: "网上确认书不能为空", trigger: "change" },
        ], //  商标确认书
        radio: [],
        befAddChangeCn: [], //变更地址
        befNameChangeCn: [], //变更名义
        proImg: [
          { required: true, message: "图片还未上传", trigger: "change" },
        ],
      },
      mark: false, //  网上书的标记
    };
  },
  mounted() {
    (this.showSta = 1),
      //获取从存储在路由中的classId
      (this.classId = this.$route.query.id);
    //获取网点列表
    this.$http.get("trademark/system/dept/findDept").then((res) => {
      ////console.log(res.data.data);
      this.options = res.data.data;
    });
    if (this.$store.state.stateJdg) {
      this.mark = true;
      let {
        contacts,
        ageName,
        appNum,
        isComm,
        befNameChangeCn,
        befNameChangeEn,
        befAddChangeCn,
        befAddChangeEn,
        changeName,
        chaMeList,
        otherfile,
        zmOtherfile,
        jtOtherfile,
        zmOthertext,
        jtOthertext,
        decTraAppModel,
        jtuserOthertext,
        jtuserOtherfile,
        branchNetworkId,
      } = this.$store.state.alterData.data;
      this.ruleForm.Linkman = contacts;
      this.ruleForm.organization = ageName;
      this.ruleForm.loginNum = appNum;
      this.ruleForm.radio = Number(isComm);

      this.ruleForm.value = Number(branchNetworkId);
      // 其他附件
      this.ruleForm.decTraAppModel = Number(decTraAppModel);
      this.ruleForm.dengjichenluofile = JSON.parse(otherfile);
      this.ruleForm.zhengmingrulefile = JSON.parse(zmOtherfile);
      this.ruleForm.jtuserulefile = JSON.parse(jtOtherfile);
      this.ruleForm.jtusepepleotherfile = JSON.parse(jtuserOtherfile);
      this.ruleForm.zhengmingruletext = zmOthertext;
      this.ruleForm.jtuseruletext = jtOthertext;
      this.ruleForm.jtusepepleothertext = jtuserOthertext;

      this.ruleForm.ruleRadio = Number(changeName);
      this.ruleForm.alterRadio = Number(chaMeList);
        this.apply=this.$store.state.alterData.proAppchangeAddList
      //回显图片
      this.imgfile = config.host + this.$store.state.alterData.public.qrfile; //确认
      // this.imgfile = config.host + this.$store.state.alterData.public.proImg;//之前
      //console.log(this.imgfile);
      //回显共有人append
      if (this.$store.state.alterData.append) {
        // this.ruleForm.commonArr = this.$store.state.alterData.append;
        //        this.$store.state.alterData.append.forEach((item) => {
        ////          let objCommom = JSON.parse(JSON.stringify(this.modelcommon));//把实际模板放入样式模板赋值给Common
        ////          this.ruleForm.commonArr.push(objCommom);
        //          let objValue = JSON.parse(JSON.stringify(this.commonModel));//把实际模板放入样式模板赋值给objValue
        //          objValue.value = item.partNameCh;
        //          objValue.englishValue = item.partNameEn;
        //          objValue.siteValue = item.partAddrCh;
        //          objValue.englishSiteValue = item.partAddrEn;
        //          objValue.chName = item.changeAfterName;
        //          objValue.chNameEn = item.changeAfterNameEn;
        //          objValue.chAddr = item.changeAfterAddr;
        //          objValue.chAddrEn = item.changeAfterAddrEn;
        //          this.common.push(objValue);
        //        });
      }
    }
  },
  watch: {
    //通过数据监听的方式将共有人模板中的信息同步到ruleForm.commonArr中
    common: {
      handler(newName, oldName) {
        //        this.common.forEach((item, index) => {
        //          this.ruleForm.commonArr[index].partNameCh = item.value;
        //          this.ruleForm.commonArr[index].partNameEn = item.englishValue;
        //          this.ruleForm.commonArr[index].partAddrCh = item.siteValue;
        //          this.ruleForm.commonArr[index].partAddrEn = item.englishSiteValue;
        //          this.ruleForm.commonArr[index].changeAfterAddr = item.chAddr;
        //          this.ruleForm.commonArr[index].changeAfterAddrEn = item.chAddrEn;
        //          this.ruleForm.commonArr[index].changeAfterName = item.chName;
        //          this.ruleForm.commonArr[index].changeAfterNameEn = item.chNameEn;
        //
        //        });
      },
    },

    "ruleForm.radio": function (val) {
      if (val == 1) {
        console.log("sadsadsa");
        if (this.$store.state.stateJdg == false) {
          this.plus();
        }
      } else {
        this.dele();
      }
    },
    showSta: function (val) {
      //监听三个次选项状态，默认加载输入框
      //      if (val == 1) {
      //        this.showList.showN = true
      //        this.showList.showAll = false
      //        this.showList.showA = false
      //        this.apply = []
      //        this.applyplus()
      //      } else if (val == 2){
      //        this.showList.showN = false
      //        this.showList.showAll = false
      //        this.showList.showA = true
      //         this.apply = []
      //         this.applyplus()
      //
      //      }else if(val == 3){
      //        this.showList.showN = false
      //        this.showList.showAll = true
      //        this.showList.showA = false
      //        this.apply = []
      //        this.applyplus()
      //      }
    },
    "ruleForm.proImg": function () {},
    "ruleForm.ruleRadio": function (val) {
      if (val == 1) {
        this.showSta = "";
        //        for (const key in this.showList) {
        //          this.showList[key] = false
        //        }
        // this.apply = []
        console.log(this.apply);
      } else if (val == 0) {
        this.showSta = 1;
      }
    },
  },
  methods: {
    // decChange(){
    //   // if(this.ruleForm.decTraAppModel==2){
    //     this.ruleForm.radio=1
    //   // }
    // },
    backUrl(url,file_config){
      this.ruleForm[file_config["field"]].push(url)
    },
    delUrl(index,file_config){
      this.ruleForm[file_config["field"]].splice(index,1)
      this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
    },
    getBoth(value) {
      this.ruleForm.commonArr = value;
    },
    backCardImageMain(files, { index }) {
      //修改证明图片
      //        this.apply
      if (files.length > 0) {
        let form = new FormData();
        form.append("picbussi", files[0]);
        form.append("picType", 1);
        this.$http({
          method: "post",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          url: "/trademark/distinguish/picdis",
          data: form,
        }).then((res) => {
          let obj = JSON.parse(JSON.stringify(this.apply[index]));
          obj["proImg"] = res.data.data.popath;
          this.$set(this.apply, index, obj);
        });
      } else {
        //没有返回文件说明是删除
        this.apply[index]["proImg"] = res.data.data.popath;
      }

      this.ruleForm.proImg = files;
      this.img_default.proImg = "";
    },
    //返回上一步
    outStep() {
      this.$emit("wp", 1, "请填写申请业务信息");
    },
    //提示模板
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },
    //弹出框的选项确认框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //确认书
    setSure(files) {
      this.ruleForm.qrfile = files[0];
      this.mark = false;
    },
    //对于共有人的字段进行验证
    verify(formName) {
      let inside = true;
      var wrapStatus = true;

      this.$refs[formName].validate((valid) => {
        if (valid) {
          //有则不做操作
        } else {
          this.dialogVisible = false;
          this.open1("请完整填写表单数据", 66);
          wrapStatus = false;
          return false;
        }
      });

      if (wrapStatus !== false) {
        //        this.ruleForm.commonArr.forEach((item) => {
        //          if(inside == true){
        //
        //            if (item.partAddrCh == "" || item.partNameCh == "") {
        //              status = false
        //              this.open1("更变前名称(中文)或更变前地址(中文) 不能为空", 11);
        //              this.dialogVisible = false;
        //              inside = false
        //            }
        //          }
        //        });
      }
      if (this.ruleForm.qrfile == "" && this.$store.state.stateJdg == true) {
        this.ruleForm.qrfile = {}; //   原商品确认书不变赋值
      }
    },
    //表单提交事件
    submitForm(formName) {
      let _this = this;
      console.log(this.apply);
      if (this.ruleForm.value == "") {
        return this.open1("请选择网点", 55);
      }
      this.$refs[formName].validate((valid) => {
        ////console.log(valid);
        if (valid) {
          //每次提交重新生成新的FormData用于储存新的数据
          this.formData = new FormData();
          this.dialogVisible = false;

          //向FormData中添加数据
          let arr = this.$store.getters.getRuleForm;
          for (let key in arr) {
            this.formData.append(key, arr[key]);
          }
          //变更前信息
          console.log(this.ruleForm.applyArr);
          this.formData.append("proAppchangeAdd", JSON.stringify(this.apply));

          this.formData.append("contacts", this.ruleForm.Linkman); //联系人
          this.formData.append("appNum", this.ruleForm.loginNum); //申请号
          this.formData.append("isComm", this.ruleForm.decTraAppModel==2?1:0); //是否共有商标
          

          this.formData.append("changeName", this.ruleForm.ruleRadio); //变更管理规则（单选）
          this.formData.append("chaMeList", this.ruleForm.alterRadio); //变更集体成员名单（单选）
          // this.formData.append(
          //   "proAppends",
          //   this.ruleForm.decTraAppModel==2 ? JSON.stringify(this.ruleForm.commonArr) : ""
          // ); //共有人信息
          this.formData.append("file", this.ruleForm.qrfile); // 识别图片
          this.formData.append("branchNetworkId", this.ruleForm.value); //网点id
          this.formData.append("classId", this.classId); //业务id
          this.formData.append("opType", 1); //

          // 其他附件
          this.formData.append("decTraAppModel", this.ruleForm.decTraAppModel);
          this.formData.append('otherfile', JSON.stringify(this.ruleForm.dengjichenluofile));
          this.formData.append('zmOtherfile', JSON.stringify(this.ruleForm.zhengmingrulefile));
          this.formData.append('jtOtherfile', JSON.stringify(this.ruleForm.jtuserulefile));
          this.formData.append('jtuserOtherfile', JSON.stringify(this.ruleForm.jtusepepleotherfile));
          this.formData.append('zmOthertext', this.ruleForm.zhengmingruletext);
          this.formData.append('jtOthertext', this.ruleForm.jtuseruletext);
          this.formData.append('jtuserOthertext',this.ruleForm.jtusepepleothertext);

          //配置请求头
          var config = {
            header: {
              "Content-Type": "multipart/form-data",
            },
          };
          // axios向后端发送数据
          let isChange = this.$store.state.stateJdg;
          ////console.log(this.$store.state.stateJdg);
          let x = this.$store.state.storeId;
          isChange ? this.formData.append("id", x) : ""; //修改的时候填写的id
          let url = isChange
            ? this.$store.state.alterData.urls
            : "/proTAppChange/firstSubmit";
          //console.log(url);
          this.$http
            .post("trademark" + url, this.formData, config)
            .then(function (response) {
              //console.log(response);
              //若状态码不为200则不跳转
              if (response.data.code != 200) {
                _this.open1("提交失败", "error");
                return;
              }
              _this.centerDialogVisible = true;
            })
            .catch(function (error) {
              ////console.log(error);
            });
        } else {
          ////console.log("error submit!!");
          // alert(?5555)
          this.open1("请完整填写表单数据", 66);
          this.dialogVisible = false;
          return false;
        }
      });
    },
    //跳转函数
    skip() {
      this.centerDialogVisible = false;
      this.open1("操作成功");
      this.$router.push({
        path: "/business/myBusiness/auditing",
      });
    },
    //点击删除
    dele() {
      this.common.pop();
      //      this.ruleForm.commonArr.pop();
      console.log(this.common.length);
      if (this.common.length == 0) {
        this.ruleForm.radio = 0;
      }
    },
    //添加前申请人
    applyplus() {
      let objVal = JSON.parse(JSON.stringify(this.applyModel));
      this.apply.push(objVal);
      console.log("总", this.apply);
      console.log("模板", this.applyModel);
    },

    //删除前申请人
    applydele() {
      this.apply.pop();
      this.ruleForm.applyArr.pop();
      // if(this.apply.length == 0 ){

      // }
    },
    //点击添加更变许可人
    plus() {
      let objCommom = JSON.parse(JSON.stringify(this.modelcommon));
      //      this.ruleForm.commonArr.push(objCommom);
      let objValue = JSON.parse(JSON.stringify(this.commonModel));
      this.common.push(objValue);
    },
  },
  created() {
    ////console.log('2212121222')
  },
  components: {
    upfile,
    both,
    examimg,
    uploads,
  },
};
</script>
<style lang="less" scoped>
//  修改的表单样式
.box2 .upload[data-v-23a7ba7c] {
  margin: 15px 0 20px 0;
  margin-left: -15%;
}

.btnshut {
  color: #fff;
  background-color: #6e7275;
  border-color: #6e7275;
}

.upload .el-form-item__content div:nth-of-type(1) {
  margin-top: 10px;
}

.cad .el-form-item {
  margin-left: -15%;
}

.cad .el-input {
  width: 80%;
}

.informm {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 100%;
  width: 250px;
  height: 32px;
  color: #f96900;
  font-size: 10px;
  line-height: 14px;
  margin-left: -20%;
  img {
    margin: 11px;
  }
  .content {
    display: flex;
    flex-direction: column;
    .ts {
      text-indent: 3em;
    }
  }
}

.cad .applySeleBox .el-button {
  margin: 0 5px 0 0;
}

.btnBox {
  margin-left: 130px;
  margin-bottom: 20px;
}

.btns {
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 20px;
  }
}

.el-dropdown-link {
  cursor: pointer;
}

.el-dropdown {
  margin-bottom: 7px;
}

.el-dropdown-link:hover {
  color: #409eff;
}

.box2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  // margin-top: 100px;
  margin-left: 30px;
  width: 100%;
  min-height: 800px;
  .tle {
    font-size: 24px;
    color: #000;
  }
  .el-form {
    width: 100%;
    .el-input {
      width: 80%;
    }
  }
  .must,
  .select {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    margin-bottom: 80px;
    width: 100%;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .el-form-item {
      width: 750px;
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 290px !important;
      }
    }
  }
  .must {
    margin-bottom: 20px;
  }
  .line {
    width: calc(100% - 280px);
    margin: 10px auto;
    height: 1px;
    border-top: 1px dashed #d9d9d9;
  }
  .imgHint {
    margin: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #f5222d;
  }
  .affirm {
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  // .input {
  //   width: 190px;
  // }
  .upload {
    margin: 20px 0;
  }
  .type-number {
    width: 250px;
  }
  .informs {
    position: absolute;
    width: 500px;
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  
  .notice {
    color: #f96900;
    font-size: 12px;
  }
  .inform {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 80%;
    width: 300px;
    height: 32px;
    color: #F96900;
    font-size: 10px;
    line-height: 14px;
    img {
      margin: 11px;
    }
    .content {
      display: flex;
      flex-direction: column;
      .ts {
        text-indent: 3em;
      }
    }
  }
  .tle {
    list-style: none;
    margin: 40px 0 20px;
    font-size: 24px;
    & ~ .tle {
      color: #bbb;
    }
  }
  .hint {
    color: #f5222d;
    background-color: #fff;
    .el-form-item__label {
      width: 150px;
    }
    img {
      width: 20px;
    }
  }
  .el-steps {
    width: 70%;
    height: 200px;
  }
  .el-button {
    //display: block;
    display: inline;
    margin: 0 20px;
    // background-color: #67c23a !important;
    // border-color: #67c23a !important;
  }

  .common .el-button {
    background-color: #fff !important;
    border-color: #bbb !important;
  }

  //
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  color: #fff;
  .lan {
    background-color: #928585 !important;
    border-color: #2c9dfc !important;
  }
}

.dialog /deep/ .el-form-item__label {
  width: 100px !important;
}

.dialog /deep/ .el-form-item__content {
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}

.dialog /deep/ .el-input {
  width: 250px;
}

.el-checkbox-group {
  line-height: 14px;
}

// .is-checked/deep/.el-radio__inner,
// .is-checked/deep/.el-checkbox__inner {
//   border-color: #999999;
//   background: #999999;
// }
// .el-radio/deep/.el-radio__inner:hover {
//   border-color: #999999 !important;
// }
// .is-checked/deep/.el-radio__label,
// .is-checked/deep/.el-checkbox__label {
//   color: #333;
// }
.is-focus .el-checkbox__inner {
  border-color: #999999 !important;
}

.el-checkbox /deep/ .el-checkbox__inner:hover {
  border-color: #999999 !important;
}

.el-step__head.is-process {
  border-color: #f96900;
  color: #f96900 !important;
}

.hintMsg {
  /deep/ .el-dialog__header {
    display: flex;
    justify-content: center;
    font-weight: bold;
  }
  .dialog-footer {
    justify-content: center;
    .el-button {
      border-color: #2c9dfc !important;
      background: #2c9dfc !important;
    }
  }
}

#star {
  position: absolute;
  color: red;
  margin-left: -120px;
}

.exam-img{
  position: absolute;
  top: 0;
  left: 500px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style>
